<template>
  <div class="list">
    <div class="list-item">
      <h2>
        热门城市
      </h2>
      <ul>
        <li class="list-tr4" @click="handleClick(hotItem.name)" v-for="hotItem of this.cityData.hotCities" :key="hotItem.id">
          {{hotItem.name}}
        </li>
      </ul>
    </div>

    <div class="list-item">
      <h2>
        字母排序
      </h2>
      <ul>
        <li class="list-tr6" v-for="(alphabetItem,index) of this.cityData.alphabet" :key="index">
          <a :href="alphabetItem.href">{{alphabetItem.name}}</a>
        </li>
      </ul>
    </div>

    <div class="list-item" v-for="(citiesItem,index) of this.cityData.cities" :key="index">
      <h2>
        <a :id="citiesItem.letter"></a>
        {{citiesItem.letter}}
      </h2>
      <ul>
        <li class="list-tr4"  @click="handleClick(item.name)" v-for="item of citiesItem.content" :key="item.id">
          {{item.name}}
        </li>
      </ul>
    </div>

    <a class="to-top" href="#top">To<br/>top</a>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'CityHot',
  props: {
    cityData: Object
  },
  methods: {
    handleClick (city) {
      this.changeCity(city)
      this.$router.push('/')
    },
    ...mapMutations(['changeCity'])
  }
}
</script>

<style lang="stylus" scoped>
  .list
    position relative
    h2
      line-height .72rem
      font-size .24rem
      text-indent .2rem
      background #eee
    ul
      overflow auto
      li
        float left
        box-sizing border-box
        height .9rem
        margin 0
        padding .3rem 0
        border-right 1px solid #eee
        border-bottom 1px solid #eee
        text-align center
        background #fff
      .list-tr4
        width 25%
      .list-tr6
        width 16.66%
      a
        color #212121
    .to-top
      position fixed
      right .04rem
      bottom 1.4rem
      border 1px solid #eee
</style>
